Tanstack Routerでfile-based routing

code:_

src/

├── routes/ ← route 定義

│ ├── __root.tsx ← routeのRoot（createRootRoute）

│ │ <Outlet />で子ルートをレンダリング

│ │ 共通の <Link> やナビゲーション

│ │

│ ├── index.tsx ← "/" に対応（createFileRoute("/")）

│ └── about.tsx ← "/about" に対応（createFileRoute("/about")）

│

├── main.tsx ← エントリーポイント

│ routeTree.gen.ts を import

│ createRouter({ routeTree }) でルーター作成

│ <RouterProvider router={router} />

│

├── 📄 routeTree.gen.ts ← tsrで自動生成される

ファイル構造に基づいてルートツリーを構築

src/routes/__root.tsx

code:ts

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({

loader: async ({ params }) => fetchPost(params.postId),

component: PostPage,

errorComponent: ErrorComponent,

pendingComponent: LoadingComponent,

})

エントリポイント

ルーターインスタンスの作成